<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总发放优惠券" :total="dataInfo.provide">
          <a-tooltip title="平台发放的优惠券总量" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="已使用优惠券" :total="dataInfo.use">
          <a-tooltip title="用户已使用的优惠券总量" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="未使用优惠券" :total="dataInfo.notUsed">
          <a-tooltip title="用户未使用且未过期的优惠券总量" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="已过期的优惠券" :total="dataInfo.expire">
          <a-tooltip title="用户已过期的优惠券总量" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-select placeholder="请选择优惠券类型" style="width: 160px" @change="handleChange" v-if="shopType == 3">
              <a-select-option value="3">
                商品券
              </a-select-option>
              <a-select-option value="1">
                店铺券
              </a-select-option>
            </a-select>
            <a-select placeholder="请选择优惠券类型" style="width: 160px" @change="handleChange" v-else>
              <a-select-option value="1">
                通用满减券
              </a-select-option>
              <a-select-option value="3">
                商品满减券
              </a-select-option>
              <a-select-option value="2">
                品类满减券
              </a-select-option>
            </a-select>

            <div class="extra-item">
              <a @click="changeDate(dateType.today, null, null)">今日实时</a>
              <a @click="changeDate(dateType.week, null, null)">近7天</a>
              <a @click="changeDate(dateType.month, null, null)">近30天</a>
              <a @click="changeDate(dateType.total, null, null)">总计</a>
            </div>
            <a-range-picker :style="{width: '256px'}" @change="customDateChoice"/>
          </div>
          <a-tab-pane loading="true" tab="优惠券统计" key="1">
            <a-row>
              <a-col>
                <line-chart-multid-date :fields="statisticsFields" :dataSource="statistics"></line-chart-multid-date>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import Bar from '@/components/chart/Bar'
import LineChartMultidDate from '@/components/chart/LineChartMultidDate'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import {getAction, httpAction} from '@/api/manage'
import Vue from "vue";
import { ORG_CODE, SHOP_TYPE } from "@/store/mutation-types"

export default {
  name: "IndexChart",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend,
    LineChartMultidDate,
    HeadInfo
  },
  data() {
    return {
      loading: true,
      center: null,
      statistics: [],
      dataInfo: {},
      dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
      reqParam: {scopeType: null, type: undefined, dayStart: null, dayEnd: null},
      statisticsFields: ['发放优惠券', '使用优惠券', '过期优惠券'],
      shopType: 1,
    }
  },
  created() {
    //当前用户店铺类型1:平台，2：自营，3：店铺，4：供应商
    this.shopType = Vue.ls.get(SHOP_TYPE);
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo();
  },
  methods: {
    initLogInfo() {
      this.reqParam.type = this.dateType.week;
      this.requestStatistics();
      this.requestInfo({type : this.dateType.total});
    },
    customDateChoice(range) {
      this.changeDate(this.dateType.custom, range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD'));
    },
    changeDate(type, start, end) {
      this.reqParam.type = type;
      this.reqParam.dayStart = start;
      this.reqParam.dayEnd = end;
      this.reqAll();
    },
    reqAll() {
      this.requestStatistics();
      this.requestInfo(this.reqParam);
    },
    requestStatistics() {
      getAction("/statistics/couponStatistics", this.reqParam).then(res => {
        if (res.success) {
          this.statistics = res.result.lineData
        }
      })
    },
    requestInfo(param) {
      getAction("/statistics/couponInfo", param).then(res => {
        if (res.success) {
          this.dataInfo = res.result
        }
      })
    },
    handleChange(value) {
      this.reqParam.scopeType = value;
      this.reqAll();
    },
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

</style>